<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电梯人员信息录入系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--bootstrap前端框架-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!--jquery页面高级操作-->
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <style>
        .table_custom {
            text-align: center;
        }
        .table_custom tbody tr td{
            border-color: grey;
            border-width: 1px;
        }
        .height_10px{
            height: 5px;
            width: 100%;
            background-color: dodgerblue;
            margin: 10px 0;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="container">
        <h1>电梯人员信息录入系统</h1>
        <!--导航栏-->
        <div>
            <ul class="nav justify-content-end">
                <li class="nav-item">
                    <a class="nav-link disabled" id="query" href="#">传感器信息</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="add" href="#">添加信息</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="edit" href="#">编辑信息</a>
                </li>
            </ul>
        </div>
        <div class="col-md-12" id="queryinfo">
            <h3>数据表中的信息</h3>
            <div class="height_10px"></div>
            <table class="table table-bordered table_custom">
                <tbody>
                <tr>
                    <td><b>序号</b></td>
                    <td><b>时间</b></td>
                    <td><b>姓名</b></td>
                    <td><b>楼层</b></td>
                    <td><b>卡号</b></td>
                </tr>

                <tr th:if="${sensorInfoVo.sensors != null}" th:each="entries,stat:${sensorInfoVo.sensors}">
                    <td th:text="${stat.count}"></td>
                    <td th:text="${entries.getTime()}"></td>
                    <td th:text="${entries.getName()}"></td>
                    <td th:text="${entries.getFloor()}"></td>
                    <td th:text="${entries.getId()}"></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-12" id="addinfo">
            <h3>新增信息</h3>
            <div class="height_10px"></div>
            <div class="col-xs-offset-2 col-xs-8">
                <form class="form-horizontal">
                    <div class="form-group has-feedback">
                        <label for="input1" class="col-sm-3 control-label">请输入姓名</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="input1" placeholder="name">
                            <span class="glyphicon form-control-feedback"></span>
                         </div>
                         <div class="col-sm-3">
                             <span class="help-block" id="heleBlock1"></span>
                         </div>
                     </div>
                     <div class="form-group has-feedback">
                         <label for="input2" class="col-sm-3 control-label">请输入楼层</label>
                         <div class="col-sm-6">
                             <input type="text" class="form-control" id="input2" placeholder="floor">
                             <span class="glyphicon form-control-feedback"></span>
                         </div>
                         <div class="col-sm-3">
                             <span class="help-block" id="heleBlock2"></span>
                         </div>
                     </div>
                     <div class="form-group has-feedback">
                         <label for="input3" class="col-sm-3 control-label">请输入卡号</label>
                         <div class="col-sm-6">
                             <input type="text" class="form-control" id="input3" placeholder="id">
                             <span class="glyphicon form-control-feedback"></span>
                         </div>
                         <div class="col-sm-3">
                             <span class="help-block" id="heleBlock3"></span>
                         </div>
                     </div>
                    <div class="form-group has-feedback">
                        <label for="input3" class="col-sm-3 control-label">请输入时间</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="input4" placeholder="time">
                            <span class="glyphicon form-control-feedback"></span>
                        </div>
                        <div class="col-sm-3">
                            <span class="help-block" id="heleBlock4"></span>
                        </div>
                    </div>
                     <div class="form-group">
                         <div class="col-sm-offset-3 col-sm-9">
                             <button type="submit" class="btn btn-default">取&nbsp;&nbsp;消</button>
                             <button type="submit" class="btn btn-primary" onclick="addInfo()">提交</button>
                         </div>
                     </div>
                 </form>
            </div>
        </div>
        <div class="col-md-12" id="editinfo">
            <h3>编辑数据表中的信息</h3>
            <div class="height_10px"></div>
            <table id="table1" class="table table-bordered table_custom">
                <tbody>
                <tr>
                    <td><b>序号</b></td>
                    <td><b>时间</b></td>
                    <td><b>姓名</b></td>
                    <td><b>楼层</b></td>
                    <td><b>卡号</b></td>
                    <td><b>操作</b></td>
                </tr>

                <tr th:if="${sensorInfoVo.sensors != null}" th:each="entries,stat:${sensorInfoVo.sensors}">
                    <td th:text="${stat.count}"></td>
                    <td th:text="${entries.getTime()}"></td>
                    <td th:text="${entries.getName()}"></td>
                    <td th:text="${entries.getFloor()}"></td>
                    <td th:text="${entries.getId()}"></td>
                    <td>
                        <button class="btn btn-info" type="submit" th:attr="id=${entries.getId()}" data-toggle="modal" data-target="#register" onclick="editInfo(this.id)">修改</button>
                        <button class="btn btn-danger" type="submit" th:attr="id=${entries.getId()}" onclick="delInfo(this.id)">删除</button>
                        <div class="modal fade in"   id="register" >
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button class="close" data-dismiss="modal">&times;</button>
                                        <h4 class="modal-title">修改信息</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal">
                                            <div class="form-group has-feedback">
                                                <label for="input1" style="float: left" class="col-sm-3 control-label">姓名</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="edit1" placeholder="name">
                                                    <span class="glyphicon form-control-feedback"></span>
                                                </div>
                                            </div>
                                            <div class="form-group has-feedback">
                                                <label for="input2" style="float: left" class="col-sm-3 control-label">楼层</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="edit2" placeholder="floor">
                                                    <span class="glyphicon form-control-feedback"></span>
                                                </div>
                                            </div>
                                            <div class="form-group has-feedback">
                                                <label for="input3" style="float: left" class="col-sm-3 control-label">卡号</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="edit3" placeholder="id">
                                                    <span class="glyphicon form-control-feedback"></span>
                                                </div>
                                            </div>
                                            <div class="form-group has-feedback">
                                                <label for="input3" style="float: left" class="col-sm-3 control-label">时间</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="edit4" placeholder="time">
                                                    <span class="glyphicon form-control-feedback"></span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-offset-3 col-sm-9">
                                                    <button type="submit" class="btn btn-primary" onclick="editsubInfo()">提交</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-info" data-dismiss="modal">关闭</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>

        function addInfo() {
            var str=new Object();
            str.name = $("#input1").val();
            str.floor = $("#input2").val();
            str.id = $("#input3").val();
            str.time = $("#input4").val();
            var strjson = JSON.stringify(str)
            $.post("/add",{jsonObj:strjson},function(result){
                alert(result);
                window.location.href="/index";
            });
        }

        function editInfo(id) {
            $.post("/getedit",{editid:id},function(result){
                var resultobj = JSON.parse(result)
                $("#edit1").val(resultobj.name)
                $("#edit2").val(resultobj.floor)
                $("#edit3").val(resultobj.id)
                $("#edit4").val(resultobj.time)
            });
        }
        function editsubInfo() {
            var obj=new Object();
            obj.name = $("#edit1").val();
            obj.floor = $("#edit2").val();
            obj.id = $("#edit3").val();
            obj.time = $("#edit4").val();
            var strjson1 = JSON.stringify(obj)
            $.post("/edit",{jsonObj:strjson1},function(result){
                alert(result);
                window.location.href="/index";
            });
        }
        function delInfo(id){
            $.post("/delete",{delid:id},function(result){
                alert(result);
                window.location.href="/index";
            });
        }
        $(document).ready(function(){
            /*打开页面默认展示数据表的信息*/
            $("#addinfo").hide();
            $("#editinfo").hide();
            $("#queryinfo").show();
            $("#query").click(function(){
                $("#add").removeClass("disabled")
                $("#edit").removeClass("disabled")
                $("#query").addClass("disabled")
                $("#addinfo").hide();
                $("#editinfo").hide();
                $("#queryinfo").show();
            });
            $("#add").click(function(){
                $("#query").removeClass("disabled")
                $("#edit").removeClass("disabled")
                $("#add").addClass("disabled")

                $("#queryinfo").hide();
                $("#editinfo").hide();
                $("#addinfo").show();
            });
            $("#edit").click(function(){
                $("#add").removeClass("disabled")
                $("#query").removeClass("disabled")
                $("#edit").addClass("disabled")
                $("#queryinfo").hide();
                $("#addinfo").hide();
                $("#editinfo").show();
            });

        });
    </script>
</body>
</html>